<template>
  <div
    class="record"
    v-loading.fullscreen.lock="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    <HeaderPage />
    <SearchHeader></SearchHeader>
    <navPage></navPage>
    <div class="record-box w1200">
      <div class="nav"><img src="../../assets/img/ncpsy.png" alt="" /></div>
      <div class="tabs">
        <ul style="display: inline; text-align: center;" class="clearfix">
          <li
            v-for="(item, index) in tabsList"
            :key="index"
            :class="[active == index ? 'active' : '']"
            @click="tabsHandClick(index)"
          >
            {{ item }}
          </li>
        </ul>
      </div>
      <div class="apply-con">
        <div class="card-info box">
          <!-- 产品介绍 -->
          <div id="cpjs" class="title">产品介绍</div>
          <div class="bgf">
            <div>
              <img
                width="440"
                height="313"
                :src="baseUrl + '/sys/file/showpic?id=' + imgUrl"
                alt=""
              />
            </div>
            <div>
              <ul>
                <li>{{ otherInfo.materialName }}</li>
                <li>产品条形码<span style="padding-left:20px;">{{ otherInfo.materialId}}</span></li>
                <li>产品价格<span style="padding-left:20px;">￥{{ otherInfo.price}} / {{ otherInfo.unit}}</span></li>
                <li>生产基地<span style="padding-left:20px;">{{ otherInfo.baseName}}</span></li>
                <li>基地电话<span style="padding-left:20px;">{{ otherInfo.contactPhone}}</span></li>
                <li>基地地址<span style="padding-left:20px;">{{ otherInfo.basePosition}}</span></li>
              </ul>
            </div>
          </div>
          <!-- 生产追溯 -->
          <div id="sczs" class="title">生产追溯</div>
          <div class="sczs"
            v-for="(item, index) in zsList"
            :key="index"
            >
            <ul>
              <li>{{ item.title }}</li>
              <li>操作人：<span style="padding-left:10px;">{{ item.operator }}</span><span style="padding-left:40px;">操作时间：</span><span style="padding-left:10px;">{{ item.operateTime }}</span></li>
              <li>操作描述：<p>{{ item.operate }}</p></li>
              <div style="width:700px;">
                <img
                  v-for="(item1, index1) in item.picture.split(',')"
                  :key="index1"
                  :src="baseUrl + '/sys/file/showpic?id=' + item1"
                  alt=""
                  height="313"
                />
              </div>
            </ul>
          </div>
          <!-- 质检报告 -->
          <div id="zjbg" class="title">质检报告</div>
          <div class="zjbb">
            <ul>
              <li>检测方式：<span style="padding-left:10px;">{{ otherInfo.examWay }}</span><span style="padding-left:40px;">认证结果：</span><span style="padding-left:10px;">{{ otherInfo.examResult }}</span></li>
              <li>检测时间：<span style="padding-left:10px;">{{ otherInfo.examTime }}</span><span style="padding-left:40px;">认证方式：</span><span style="padding-left:10px;">{{ otherInfo.authenticationWay }}</span></li>
              <li>检&nbsp;测&nbsp;员：<span style="padding-left:10px;">{{ otherInfo.inspector }}</span><span style="padding-left:40px;">检测单位：</span><span style="padding-left:10px;">{{ otherInfo.checkUnit }}</span></li>
              <div style="width:700px;" v-show="checkRepotyList.length > 0">
                <img
                  v-for="(item2, index2) in checkRepotyList"
                  :key="index2"
                  :src="baseUrl + '/sys/file/showpic?id=' + item2.id"
                  alt=""
                  height="180"
                  width="130"
                />  
              </div>
            </ul>
          </div>
          <!-- 流通情况 -->
          <div id="ltqk" class="title">流通情况</div>
          <div class="ltqk">
            <ul>
              <li>生产基地：<span>{{ otherInfo.baseName }}</span></li>
              <li 
                v-for="(item2, index2) in list"
                :key="index2"
                >购买方：<span>{{ item2.userId }}</span>
              </li>           
            </ul>
          </div>
        </div>
      </div>
    </div>
    <FooterPage></FooterPage>
  </div>
</template>
<script>
import HeaderPage from "../../components/head";
import SearchHeader from "../indexHome/searchHeader";
import FooterPage from "../../components/footer";
import navPage from "../../components/nav";
export default {
  components: {
    HeaderPage,
    SearchHeader,
    FooterPage,
    navPage,
  },
  data() {
    return {
      active: 0,
      materialId: this.$route.query.materialId,
      list: [],
      baseName: "",
      info: {},
      otherInfo: {},
      imgUrl: "",
      checkRepotyList: [],
      zsList: [],
      loading: false,
      isShow: false,
      tabsList: [
        "产品介绍",
        "生产追溯",
        "质检报告",
        "流通情况",
      ]
    };
  },
  mounted() {
    this.search();
  },
  methods: {
    // 选 项卡切换
    tabsHandClick(index) {
      this.active = index;
      console.log(index);
      if(index == 0){
        document.querySelector("#cpjs").scrollIntoView(true);
      }
      if(index == 1){
        console.log('执行了sczs');
        document.querySelector("#sczs").scrollIntoView(true);
      }
      if(index == 2){
        document.querySelector("#zjbg").scrollIntoView(true);
      }
      if(index == 3){
        document.querySelector("#ltqk").scrollIntoView(true);
      }
      // document.querySelector("#gd").scrollIntoView(true);
      // if (this.$refs.powerruleForm) {
      //   this.$refs.powerruleForm.clearValidate();
      // }
      // if (this.$refs.ruleForm) {
      //   this.$refs.ruleForm.clearValidate();
      // }
      // if (this.$refs.historyruleForm) {
      //   this.$refs.historyruleForm.clearValidate();
      // }
      // if (this.$refs.relationruleForm) {
      //   this.$refs.relationruleForm.clearValidate();
      // }
      // if (this.$refs.valueruleForm) {
      //   this.$refs.valueruleForm.clearValidate();
      // }
    },
    search() {
      this.getDetail();
      this.getUserList();
      this.getzsList();
      // this.getBuyRecordList();
    },
    //获取商品详情
    getDetail() {
      this.loading = true;
      this.$http("get", "/sys/iaMaterialCorps/getOfficialDetail.do", {
        materialId: this.materialId,
      }).then((res) => {
        if (res.code == "0000") {
          this.otherInfo = res.result;

          //图片处理
          if (res.result.iconUrl) {
            this.imgUrl = this.spimgurl(res.result.iconUrl);
          }
          console.log("检验报告：", res.result.checkReport);
          //检测报告
          if (res.result.checkReport != null && res.result.checkReport !== "") {
            var imgUrlList = [];
            var splitList = this.otherInfo.checkReport.split(",");

            for (let index = 0; index < splitList.length; index++) {
              const element = splitList[index];
              var elmentList = element.split(":");
              //图片
              var itemData = {
                id: elmentList[0],
                type: "img",
              };
              imgUrlList.push(itemData);
            }
            this.checkRepotyList = imgUrlList;
          }

          this.loading = false;
          this.isShow = true;
        } else {
          this.loading = false;
          this.isShow = true;
        }
      });
    },
    //处理图片分隔
    spimgurl(value) {
      if (value != null) {
        let ff = value.split(",");
        if (ff != null && ff.length > 0) {
          const element = ff[0];
          var elmentList = element.split(":");
          return elmentList[0];
        }
      }
      return "";
    },
    //流通信息
    getUserList() {
      this.loading = true;
      this.$http("get", "/sys/foodSafeSource/findPurchaserPage.do", {
        materialId: this.materialId,
        pageNum: 1,
        pageSize: 100,
      }).then((res) => {
        if (res.code == "0000") {
          var rows = res.result.rows;
          if (rows.length > 0) {
            this.list = rows;
            this.baseName = rows[0].baseId;
          }
        }
        this.loading = false;
      });
    },
    //生产追溯
    getzsList() {
      this.loading = true;
      this.$http("get", "/sys/iaMaterialCorps/findOperatePage.do", {
        materialId: this.materialId,
        pageNum: 1,
        pageSize: 100,
      }).then((res) => {
        if (res.code == "0000") {
          var rows = res.result.rows;
          this.zsList = rows;
          console.log(this.zsList);
        }
        this.loading = false;
      });
    },
  }
};
</script>
<style  scoped>
.tabs {
  background: #fff;
  height: 52px;
  text-align: center;
}
.nav {
  margin-top: 10px;
}
.tabs ul li {
  /* float: left; */
  width: 100px; 
  display: inline-block;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.85);
  line-height: 32px;
  margin-left: 10px;
  cursor: pointer;
  margin-top: 10px;
  text-align: center;
}
.tabs ul li:hover {
  color: #f48d06;
}
.tabs ul li.active {
  color: #f48d06;
  border-bottom: 3px solid #f48d06;
}
.apply-con {
  background: white;
}
.box {
  min-height: 300px;
  /* margin-top: -20px; */
  padding-top: 40px;
  padding-left: 140px;
}
.title {
  line-height: 35px;
  font-size: 16px;
  color: #4a4a4a;
  position: relative;
  margin-left: 50px;
  width: 900px;
  /* margin-top: 40px; */
}
.title::before {
  position: absolute;
  width: 5px;
  height: 20px;
  background: #f48d06;
  border-radius: 2px;
  content: " ";
  top: 5px;
  left: -10px;
}

.form-group {
  width: 1200px;
}
</style>
<style>
.form-group .el-input__inner {
  width: 219px;
  line-height: 32px;
  border-radius: 2px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  box-sizing: border-box;
}
.form-group .el-form-item__label {
  margin-bottom: 0;
  padding-bottom: 0;

  color: rgba(0, 0, 0, 0.85);
  font-size: 14px;
}
.form-group .el-form-item {
  margin-right: 32px;
}
.bgf {
  width: 900px;
  /* padding: 20px; */
  padding: 5px 0px 5px 0px;
  margin-left: 40px;
}
.sczs {
  width: 900px;
  /* padding: 20px; */
  padding: 3px 0px 0px 20px;
  margin-left: 40px;
  color: #4a4a4a;
  position: relative;
  font-size: 16px;
  /* margin-left: 50px; */
  /* width: 900px; */
}
.sczs ul img{
  padding: 5px;
}
.sczs ul li:nth-child(1){
  height: 30px;
  /* padding: 0px 0px 0px 0px; */
  color: #656565;
}
.sczs ul li:nth-child(2){
  height: 30px;
  /* padding: 0px 0px 0px 0px; */
  color: #656565;
}
.sczs ul li p{
  padding-top: 10px;
  padding-bottom: 20px;
  /* height: 200px; */
  width: 740px;
  line-height: 22px;
}
.sczs::before {
  position: absolute;
  width: 12px;
  height: 12px;
  background: #7EC014;
  border-radius: 8px;
  content: " ";
  top: 5px;
  left: 0px;
}
.zjbb {
  width: 900px;
  /* padding: 20px; */
  padding: 3px 0px 0px 20px;
  margin-left: 40px;
  color: #4a4a4a;
  position: relative;
  font-size: 16px;
  /* margin-left: 50px; */
  /* width: 900px; */
}
.zjbb ul img{
  padding: 5px;
}
.zjbb ul li{
  height: 30px;
  /* padding: 0px 0px 0px 0px; */
  color: #656565;
}
.ltqk {
  width: 900px;
  /* padding: 20px; */
  padding: 3px 0px 0px 20px;
  margin-left: 40px;
  color: #4a4a4a;
  position: relative;
  font-size: 16px;
  /* margin-left: 50px; */
  /* width: 900px; */
}
.ltqk ul li {
  padding-bottom: 20px;
}
.bgf div{
  display: inline-block;
  height: 313px;
  vertical-align: middle;
}
.bgf ul{
  width: 400px; list-style: none; vertical-align: top;
}
.bgf ul li:first-child{
  height: 38px;
  font-size: 16px;
  color: #656565;
  padding: 5px 0px 0px 20px;
  /* padding: 10px; */
}
.bgf ul li{
  height: 38px;
  padding: 5px 0px 0px 20px;
  color: #4A4A4A;
  /* padding: 10px; */
}
.next-btn {
  width: 159px;
  height: 44px;
  background: #f48d06;
  border-radius: 2px;
  color: #fff;
}
.next-btn:hover {
  opacity: 0.8;
  background: #f48d06;
  border-radius: 2px;
  color: #fff;
}
.cancle {
  width: 159px;
  height: 44px;
  background: #ffffff;
  border-radius: 2px;
  border: 1px solid #f48d06;
  color: #f48d06;
  margin-left: 60px !important;
}
.cancle:hover {
  opacity: 0.8;
  background: #f48d06;
  border-radius: 2px;
  color: #fff;
}
.form-group .el-textarea {
  width: 100%;
}
.form-group .el-textarea__inner {
  width: 100%;
}
.intr-left {
  margin-left: 63px;
  width: 496px;
}
</style>